<template>
  <view class="animated fadeIn faster">
    <view class="page-bg">
      <view :style="{'height': titleBarHeight + 'px','paddingTop':statusBarHeight+'px'}"
            class="d-flex d-flex-center d-flex-middle">
        <text :style="{'height': menuButtonHeight-8 + 'px'}" class="font32">我的</text>
      </view>

      <view class="d-flex d-flex-between font30 pr-5">
        <view></view>
        <view class="d-flex d-flex-middle main-color py-2 pt-4">
          <text class="iconfont icon-shezhi mr-5 font40" @click="goUrl('/subPages/setting/setting')"></text>
          <text class="iconfont icon-xinfeng font50" @click="goUrl('/subPages/message/message')"></text>
        </view>
      </view>

      <view class="d-flex px-4 d-flex-middle d-flex-between">
        <view class="d-flex d-flex-middle">
          <view class="" >
            <image :src="avatar" style="width:100rpx;height: 100rpx;border-radius: 180rpx;"></image>
          </view>
          <view class="d-flex d-flex-column ml-3 color-92" v-if="loginState">
            <text class="mb-2 font30 font-bold">{{nickName}}</text>
            <text>{{phone}}</text>
          </view>
		  <view class="ml-2 color-92" v-else @click="goLogin">
			  <text class="font32">登录注册</text>
		  </view>
        </view>
        <view v-if="loginState"><text class="iconfont icon-arrow-right main-color" @click="goUrl('/subPages/user-info/user-info')"></text></view>
      </view>
	  
      <view class="mt-3 mx-5" @click="goUrl('/subPages/memberCenter/memberCenter')">
        <image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/VIP.png" mode="widthFix"></image>
      </view>
    </view>

    <view>
      <view class="d-flex d-flex-between px-4 py-3">
        <text class="main-color font-bold font30">我的订单</text>
        <view class="font24">
          <text class="color-92">查看全部</text>
          <text class="iconfont icon-arrow-right font20"></text>
        </view>
      </view>
      <view class="d-flex d-flex-center ">
        <view
            v-for="(item, index) in orderStatusList"
            :key="index"
            class="d-flex d-flex-column text-center d-flex-middle d-flex-item"
            @click="goUrl(item.url)"
        >
          <image
              :src="item.icon"
              style="width: 60rpx; height: 60rpx;"
              mode="aspectFit"
          ></image>
          <text class="font20 color-92 mt-1">{{ item.label }}</text>
        </view>
      </view>
    </view>

    <view class="d-flex d-flex-column d-flex-middle pt-2 mt-7">
      <view
          v-for="(item, index) in menuList"
          :key="index"
          class="menu-item bg-fff color-92 mb-1 p-2 mx-2 rounded10 d-flex-middle d-flex d-flex-between"
          @click="goUrl(item.url)"
      >
        <text>{{ item.name }}</text>
        <text class="iconfont icon-youjiantou font28"></text>
      </view>
    </view>


  </view>
</template>

<script>
import {mapState} from "vuex"
import store from '@/store';

export default {
  data() {
    return {
      formData: {
        name: ''
      },
      orderStatusList: [
        {count: 0, label: '待支付', icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/order1.png',
          url: '/subPages/order/order?status=0'
        },
        {count: 0, label: '已支付', icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/order2.png',
          url: '/subPages/order/order?status=0'},
        {count: 0, label: '已取消', icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/order3.png',
          url: '/subPages/order/order?status=0'},
        {count: 0, label: '售后', icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/order4.png',
          url: '/subPages/order/order?status=0'}
      ],
      menuList: [
        {name: '我的课程', url: '/subPages/myCourses/myCourses'},
        {name: '我的收藏', url: '/subPages/myCollection/myCollection'},
        {name: '我的题库', url: '/subPages/myQuestionBank/myQuestionBank'},
        {name: '学习轨迹', url: '/subPages/myStudy/myStudy'},
        {name: '积分商城', url: '/subPages/pointsMall/pointsMall'},
        // {name: '我的资料包', url: '/subPages/myDataPackage/myDataPackage'},
        {name: '联系客服', url: '/subPages/customerService/customerService'}
      ]
    }
  },
  computed: {
    ...mapState({
      nickName: state => state.nickName,
      user_id: state => state.id,
      loginState: state => state.loginState,
      phone: state => state.phone,
      avatar: state => state.avatar,
      statusBarHeight: state => state.statusBarHeight,
      menuButtonHeight: state => state.menuButtonHeight,
      titleBarHeight: state => state.titleBarHeight,
    }),
  },
  methods: {
    goLogin() {
      uni.navigateTo({
        url: '/subPages/login/login'
      })
    },
    handleMenuClick(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    },
    goUrl(urlPages, data) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
      uni.navigateTo({
        url: urlPages
      })
      }
    }
  }
}
</script>

<style scoped>
.page-bg {
  border-bottom-left-radius: 100rpx;
  border-bottom-right-radius: 100rpx;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(62, 142, 254, 0.8) 0%, rgba(62, 142, 254, 0) 100%);
}


.searchBox input {
  height: 100%;
}

.color-92 {
  color: rgba(92, 92, 92, 1);
}

.menu-item {
  width: calc(100% / 1.1);
  text-align: center;
}

.menu-item:last-child {
  border-bottom: none;
}
</style>
